<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <button onclick="test()">演示其他方式操作元素属性</button>


    <button https://devops.aliyun.com/lingma/login?state=2-aeea34153fc24c629ecec18936857d72&port=37510="repalce()">换一张</button> <br>
    <button onclick="hide()">点一下</button> <br>
    <button onclick="show()">点一下2</button> <br>
    <button onclick="check()">check</button> <br>
    <div class="box" style="color: red;">999</div>
    <img src="img/1.png" alt="加载失败" title="图片" width="100px" height="100px">
<br>
    <input type="checkbox">选择
</body>
</html>
<script>
    //定义自定义函数
    function repalce(){
        //获取元素对象
       var img = document.querySelector("img");
       //可以获取相关的属性
     alert(img.src);
      /*  alert(img.alt);
      alert(img.title); */

      //设置值
      img.src = "img/a.webp";
      /* img.alt= ""; */

      //操作style属性
      var div = document.querySelector(".box");
      /* alert(div.style.color) *///获取值

      div.style.color="pink";
      div.style.backgroundColor="red";/* 去除横杆 第二字字母大写 */
      div.style.width="100px";
      div.style.height="200px";
        


    }

    function hide(){
        var div = document.querySelector(".box");
        div.style.display="none";
    }

    function show(){
        var div = document.querySelector(".box");
        div.style.display="block";
    }
    function check(){
        var input = document.querySelector("input");
        //获取复选框的选择状态
       alert(input.checked) 
       input.checked = !input.checked;
    }


    function test(){
        //通过别的方式操作属性
        var img = document.querySelector("img");
        //根据标签对象的属性名获取属性的值
       alert(img.getAttribute("src"));
       //根据标签的属性名设置相关属性值
       img.setAttribute("src","img/a.webp");


    }


</script>